---
import '@fontsource-variable/nunito'
import '../styles/home.css'
import { Beam, Button } from '../components'
import { SEO } from 'astro-seo'

const DEFAULT_URL_SITE = 'https://unistyl.es'
const openGraph = {
    title: 'Welcome to Unistyles 3.0',
    type: 'image/png',
    image: 'https://unistyl.es/opengraph-image3.png',
    alt: 'Unistyles',
    url: DEFAULT_URL_SITE,
    description: 'Level up your React Native StyleSheet!'
}
---

<!doctype html>
<html lang="en">
	<head>
        <SEO
            charset="UTF-8"
            title="Unistyles 3.0"
            description="Level up your React Native StyleSheet"
            openGraph={{
                basic: {
                    title: openGraph.title,
                    type: openGraph.type,
                    image: openGraph.image
                },
                image: {
                    alt: openGraph.alt
                },
                optional: {
                    description: openGraph.description
                }
            }}
            twitter={{
                creator: '@jpudysz'
            }}
            extend={{
                link: [
                    { rel: 'icon', href: './favicon.png' }
                ],
                meta: [
                    { name: 'viewport', content: 'width=device-width, viewport-fit=cover, height=device-height, initial-scale=1' },
                    { name: 'generator', content: Astro.generator },
                    { name: 'keywords', content: 'unistyles react-native react-native-web expo ios android codemask' },
                    { name: 'msapplication-TileColor', content: '#171928' },
                    { name: 'theme-color', content: '#171928' },
                    { name: 'twitter:image', content: openGraph.image },
                    { name: 'twitter:card', content: 'summary_large_image' },
                    { name: 'twitter:title', content: openGraph.title },
                    { name: 'twitter:description', content: openGraph.description },
                    { name: 'twitter:site', content: '@jpudysz' }
                ]
            }}
        />
	</head>
	<body>
        <canvas class="galaxy" />
        <main>
            <div class="content-container">
                <div class="content">
                    <Beam />
                    <h1>
                        Welcome to&nbsp;<b>Unistyles&nbsp;<span class="version">3.0</span></b>
                    </h1>
                    <h2>
                        Level up your React&nbsp;Native&nbsp;StyleSheet!
                    </h2>
                    <div class="button-container">
                        <Button
                            text='Get started'
                            href='v3/start/introduction'
                        />
                        <Button
                            text='Github'
                            href='https://github.com/jpudysz/react-native-unistyles'
                            github
                        />
                    </div>
                </div>
            </div>
            <div class="unicorn-container">
                <div class="light" />
                <img class="clouds" src="./clouds.svg" alt="clouds" />
                <img class="unicorn" src="./unicorn.svg" alt="unicorn" />
            </div>
            <div class="blend" />
        </main>
    </body>
</html>

<script src="../animate.ts" />

<style>
    canvas {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
    }

    main {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 100px;

        @media (max-width: 991px) {
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;
            height: 100vh;
            gap: 0px;
            padding-top: 160px;
        }
    }

    h1 {
        font-size: clamp(40px, 3.5vw, 64px);
        font-weight: 500;
        margin-bottom: 8px;
        line-height: 1.1em;
        z-index: 10;
        position: relative;

        @media (max-width: 991px) {
            margin-bottom: 20px;
        }
    }

    h2 {
        font-size: clamp(20px, 2vw, 28px);
        font-weight: 600;
        margin-bottom: 42px;
        z-index: 10;
        position: relative;

        @media (max-width: 991px) {
            margin-bottom: 32px;
        }
    }

    .version {
        color: var(--pink);

        &::selection {
            color: var(--white);
        }
    }

    .button-container {
        display: flex;
        gap: 16px;
    }

    .content-container {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        height: 100vh;
        padding-bottom: 40px;
        width: 50%;
        z-index: 20;
        padding-left: 32px;
        position: relative;

        @media (max-width: 991px) {
            height: auto;
            width: auto;
            align-items: flex-start;
            padding: 0 16px;
        }
    }

    .content {
        @media (max-width: 991px) {
            width: 100%;
            display: flex;
            flex-direction: column;
        }
    }

    .unicorn-container {
        position: relative;
        width: 40%;
        max-width: 1000px;
        height: min(40vw, 1000px);

        @media (max-width: 991px) {
            width: 100%;
            max-width: 600px;
            translate: 15% 0%;
        }
    }

    .light {
        position: absolute;
        width: 90%;
        aspect-ratio: 1;
        right: 30%;
        bottom: min(6vw, 130px);
        background: radial-gradient(50% 50% at center, rgba(0, 234, 255, 0.8), cubic-bezier(0.3, 0, 0.1, 1), transparent);
        transition: transform 0.1s linear;
    }

    .clouds {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 140%;
        transition: transform 0.1s linear;
    }

    .unicorn {
        position: absolute;
        bottom: min(3.4vw, 83px);
        right: 16%;
        width: 90%;
        transition: transform 0.1s linear;

        @media (max-width: 991px) {
            bottom: min(8vw, 50px);
        }
    }

    .blend {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(8, 0, 35, 0) 0%, rgba(242, 38, 181, 0.5) 150%);
        mix-blend-mode: overlay;
    }
</style>
